<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">
        <!-- <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div>
        <div>1</div> -->
    </div>


    <script>

        // // 文档碎片
        // var fragment = document.createDocumentFragment();
        // // 动态生成10个div
        // for (var i = 0; i < 10; i++) {
        //     var oDiv = document.createElement('div');
        //     oDiv.innerHTML = i;
        //     oDiv.onclick = function () {
        //         console.log(i)
        //     }
        //     // document.body.appendChild(oDiv);
        //     fragment.appendChild(oDiv);

        // }
        // document.body.appendChild(fragment);


        var res = '';
        for (var i = 0; i < 10; i++) {
            res += `
                <div onclick="fn(this)">${i}</div>
            `
        }

        var oBox = document.querySelector('.box');
        oBox.innerHTML = res;


        // 这只是一个普通的函数，并不是事件处理函数
        function fn(a) {
            console.log(a.innerHTML)
        }


        // fn()
    </script>

</body>

</html>